<template>
	<view class="sign-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="考勤规则"></uni-navbar></view>
		<view class="">
			<u-card title="考勤时间" :foot-border-top="false">
				<template v-slot:body>
					<view class="name-title">工作日：{{ workDay }}</view>
					<block v-if="shift.type == 2">
						<view class="name-title">上下班时间：{{ shift.amStartPunch }} - {{ shift.amEndPunch }}</view>
						<view class="name-title">上下班时间：{{ shift.pmStartPunch }} - {{ shift.pmEndPunch }}</view>
					</block>
					<block v-else>
						<view class="name-title">上下班时间：{{ shift.amStartPunch }} - {{ shift.pmEndPunch }}</view>
					</block>
				</template>
			</u-card>
			<u-card title="考勤范围" :foot-border-top="false">
				<template v-slot:body>
					<view class="name-title location-name" @click="navTo()">
						<image src="/static/img/mapiconend.png" mode="widthFix"></image>
						{{ options.attndLocation }}
					</view>
					<view class="name-title">考勤范围：{{ options.effectiveRange }}米以内</view>
				</template>
			</u-card>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			workDay: '',
			options: '',
			shift: ''
		};
	},
	onLoad() {
		this.loadLogin();
		this.getrule();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
			} else {
				this.$logout();
			}
		},
		navTo() {
			uni.navigateTo({
				url: '/pages/grid/sign/signmap?zb=' + this.options.lngLat + '&jl=' + this.options.effectiveRange
			});
		},
		getrule() {
			this.$request('/oaAttnd/options/query', {
				clientCode: this.clientCode
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.options = res.data.options;
				this.shift = res.data.shift;
				if (this.options.isSun == 1) {
					this.workDay += '周日, ';
				}
				if (this.options.isMon == 1) {
					this.workDay += '周一, ';
				}
				if (this.options.isTue == 1) {
					this.workDay += '周二, ';
				}
				if (this.options.isWed == 1) {
					this.workDay += '周三, ';
				}
				if (this.options.isThu == 1) {
					this.workDay += '周四, ';
				}
				if (this.options.isFri == 1) {
					this.workDay += '周五, ';
				}
				if (this.options.isSat == 1) {
					this.workDay += '周六, ';
				}
			});
		}
	}
};
</script>

<style lang="scss">
.name-title {
	color: #999;
	margin-bottom: 5px;
}

.location-name {
	display: flex;
	align-items: center;
	color: #ff0000;

	image {
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
